<template>
    <div class="room-status-view">
        <table>
            <thead>
                <tr>
                    <th>时间和房型</th>
                    <th>产品名称</th>
                    <th v-for="day in nextTenDays" :key="day">{{ day }}</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="room in rooms" :key="room.id">
                    <td>{{ room.timeAndType }}</td>
                    <td>{{ room.productName }}</td>
                    <td v-for="price in room.prices" :key="price">{{ price }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
export default {
    data() {
        return {
            rooms: [
                {
                    id: 1,
                    timeAndType: '标准间',
                    productName: '标准房',
                    prices: [100, 110, 120, 130, 140, 150, 160, 170, 180, 190]
                },
                {
                    id: 2,
                    timeAndType: '豪华间',
                    productName: '豪华房',
                    prices: [200, 210, 220, 230, 240, 250, 260, 270, 280, 290]
                }
            ]
        };
    },
    computed: {
        nextTenDays() {
            const days = [];
            const today = new Date();
            for (let i = 0; i < 10; i++) {
                const nextDay = new Date(today);
                nextDay.setDate(today.getDate() + i);
                days.push(nextDay.toISOString().split('T')[0]);
            }
            return days;
        }
    }
};
</script>

<style scoped>
.room-status-view {
    padding: 20px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    border: 1px solid #ddd;
    padding: 8px;
}

th {
    background-color: #f2f2f2;
}
</style>